/**
* 系统管理 菜单管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">用户管理</div>
      <el-col :span="4"></el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary">全部展开</el-button>
          <el-button size="small" type="primary">全部压缩</el-button>
        </div>
        <el-tree class="treeclass" ref="tree" :data="treeData" default-expand-all="" :props="defaultProps"
                 @node-click="nodeclick" @check-change="handleClick" check-strictly node-key="id"
                 show-checkbox></el-tree>
      </el-col>
      <el-col :span="18">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addModule(2)">添加</el-button>
        </div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="菜单名称" prop="moduleName">
            <el-input size="small" v-model="form.menuName"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="moduleUrl">
            <el-input size="small" v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="addModule(1)">修改</el-button>
            <el-button size="small" type="primary" v-show="showdelete" @click="deleteModule">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  ModuleGet,
  ModuleDelete
} from '../../api/userMG'
import {addMenu, getAllMenu} from "../../api/basisMG";

export default {
  data() {
    return {
      showdelete: true,

      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        id: null,
        menuName: '',
        url: ''
      },
      // rules表单验证
      rules: {},
      fmenu: []
    }
  },
  /**
   * 创建完毕
   */

  created() {
    window.myData = this;
    this.getdata()
    this.getmenu()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据
    getdata() {

    },
    // 添加
    addModule(id) {
      if (id == 2) {
        this.form.id = null
      }
      addMenu(this.form).then(resp => {
        this.$message({
          type: 'success',
          message: '新增成功'
        })
        getmenu()
      })
    },
    // 获取父级菜单
    getmenu() {
      var _this = this

      getAllMenu().then(resp => {
        _this.treeData = [{}]
        let listData = resp.body;
        for (let i = 0; i < listData.length; i++) {
          _this.treeData[i] = {};
          _this.treeData[i].id = listData[i].id;
          _this.treeData[i].name = listData[i].menuName;
          _this.treeData[i].url = listData[i].url;
        }
      })

    },
    // 点击节点
    nodeclick(arr, node, self) {
      this.form.id = arr.id;
      this.form.menuName = arr.name;
      this.form.url = arr.url;
    },
    // 保存菜单

    // 删除菜单
    deleteModule() {

      ModuleDelete(this.form.moduleId)
        .then(res => {
          this.getdata()
          this.getmenu()
          this.$message.error('菜单管理列表删除成功！')
        })
        .catch(err => {
          this.$message.error('菜单管理列表删除失败，请稍后再试！')
        })
    }
  }
}
</script>

<style>
.user-search {
  margin-top: 20px !important;
}

.user-search td {
  margin-top: 20px !important;
}

.userRole {
  width: 100%;
}

.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}

.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}

.mod-btnbox {
  margin-bottom: 20px;
}

.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}

.selectw {
  width: 100%;
}
</style>

